@text-color:#333;
@link-color:#009;
@link-visited-color:#c09;
body {
  color: @text-color;
  a {
    color: @link-color;

    &:visited {
      color: @link-visited-color;
    }
  }
}

#appWrap {
  padding: 1em;
}

header#appHeader {
  h1 {
    .reset-margins;
    display: inline-block;
    margin-right: 1em;
  }
  #mainMenu {
    display:inline-block;

    li {
      color: lighten(@text-color, 20%);
      a {
        color: lighten(@text-color, 20%);
      }
    }

    li.selected {
      color: @text-color;
      font-weight: bold;
      a {
        color: @text-color;
      }
    }
  }
}

.category-menu {
  li {
    margin:1em .5em;
    a:link {
      padding:7px;
      text-decoration: underline;

      .border-on-hover(@text-color, 7px);
    }
    a:visited {
      color: @link-color;
    }
  }
}

.menu-list {
  .reset-list;

  li {
    .inline-list-item;

    a {
      text-decoration: none;

      &.selected {
        font-weight: bold;
        color: @text-color;
        text-decoration: none;
      }
    }
  }
}

#categoryProductList {
  img {
    display: block;
  }
}

footer#footer {
  margin-top: 2em;
  border-top: 1px solid lighten(@text-color, 60%);
  padding-top:1em;
  color: lighten(@text-color, 20%);
}

table {
  color: @text-color;
  border-collapse: collapse;
  border: 1px solid @text-color;

  thead th, tbody td {
    padding:1em;
  }
  thead th {
    background-color: @text-color;
    color: #fff;
  }

  tbody tr:nth-child(odd) {
    background-color: #eee;
  }
}

//
//utils
/////////
.reset-margins {
  margin: 0;
  padding: 0;
}

.reset-list {
  .reset-margins;
  list-style-type: none;
}

.inline-list-item {
  display:inline-block;
    margin-right: 1em;

    &:last-child {
      margin-right: 0;
    }
}

.border-on-hover(@border-color, @original-padding) {
  &:hover {
    padding: @original-padding - 1px;
    border: 1px solid @border-color;
  }
}

.scaffold {
  border:1px solid red;
}